<template>
  <div style="height: 400px;overflow: auto">
    <el-row>
      <el-col v-for="item in icons" :key="item" :span="4">
        <div class="icon-box" @click="chooseIcon(item)">
          <div v-if="item.startsWith('el-icon')">
            <i :class="item" class="icon" />
          </div>
          <div v-else>
            <svg-icon :icon-class="item" class="icon" />
          </div>
          <div style="padding-top: 10px">{{ item }}</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
/**
 * @author yizuomin
 * @date 2023/4/1 11:24
 **/
import { iconsList } from '@/utils/icon'

export default {
  name: 'IconSelect',
  data() {
    return {
      icons: []
    }
  },
  mounted() {
    this.icons = iconsList
  },
  methods: {
    chooseIcon(row) {
      this.$emit('closeClick', row)
    }
  }
}
</script>

<style scoped>
.icon-box {
  padding: 10px;
  cursor: pointer;
  text-align: center;
}

.icon {
  font-size: 40px;
}

.icon-box:hover {
  color: #409EFF;
}
</style>
